<template>
	<view class="container">
		<view class="content">
			<view>
				<u-popup :show="show" mode="bottom" :round="10">
					<view style="margin-top: 10px" @click="confirmPayWay('1')">
						<u-button style="border: 0" text="配送到家"></u-button>
					</view>
					<view style="margin-top: 10px" @click="confirmPayWay('2')">
						<u-button style="border: 0" text="到店自取"></u-button>
					</view>
					<view style="margin-top: 10px">
						<u-button style="border: 0" text="取消" @click="TurnOff"></u-button>
					</view>
				</u-popup>
			</view>
			<view>
				<u-popup :show="show1" mode="bottom" :round="10">
					<view
						style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 10px">
						<text style="font-size: 12px; color: gray">请选择地址</text>
					</view>
					<view class="content-address-list">
						<view class="content-address-list-itme" v-for="(item, index) in addressList" :key="item.id">
							<view class="content-address-item-up" @click="changeAddress(item)">
								<text style="font-weight: bold; font-size: 22px;">{{item.recipient}}</text>
								<text style="margin-left: 7%; font-weight: bold; font-size: 22px;">{{item.phone}}</text>
							</view>
							<view class="content-address-item-down" @click="changeAddress(item)">
								<text style="font-size: 15px">{{item.area}}
									{{item.detailedAddress}}</text>
							</view>
							<view v-if="index !== addressList.length - 1"
								style="height: 1%;background-color: gainsboro;margin-top: 3%;">
							</view>
						</view>
					</view>
					<view style="margin-top: 10px">
						<u-button style="border: 0" text="取消" @click="TurnOffShow1"></u-button>
					</view>
				</u-popup>
			</view>
			<view class="content-announcement">
				<text style="font-size: 12px; margin-left: 4%; color: #ec9029">提交订单前请勿切换页面</text>
			</view>
			<view v-if="orderData.type == '1'" class="content-address" @click="openShow1">
				<view class="content-address-item">
					<view class="content-address-item-up">
						<text
							style="font-weight: bold; font-size: 22px; margin-top: 4%">{{orderData.addressInfo.recipient}}</text>
						<text
							style="margin-left: 7%; font-weight: bold; font-size: 22px; margin-top: 4%">{{orderData.addressInfo.phone}}</text>
					</view>
					<view class="content-address-item-down">
						<text
							style="font-size: 15px;overflow: hidden;text-overflow: ellipsis;">{{orderData.addressInfo.area}}
							{{orderData.addressInfo.detailedAddress}}</text>
					</view>
				</view>
				<view class="content-address-icon">
					<u-icon name="arrow-right" bold></u-icon>
				</view>
			</view>
			<view class="content-payWay" @click="handleChangePayWay()">
				<view style="width: 50%; height: 100%; display: flex; align-items: center">
					<text style="margin-left: 10%; font-size: 14px">配送方式</text>
				</view>
				<view style="width: 50%; height: 100%; display: flex; align-items: center; justify-content: flex-end">
					<view v-if="orderData.type == 1"
						style="display: flex; width: 80%; justify-content: flex-end; align-items: center; height: 100%">
						<u-icon name="car" bold size="25"></u-icon>
						<text style="font-weight: bold; font-size: 15px; margin-right: 5%">配送到家</text>
					</view>
					<view v-if="orderData.type == 2"
						style="display: flex; width: 80%; justify-content: flex-end; align-items: center; height: 100%">
						<u-icon name="home" bold size="25"></u-icon>
						<text style="font-weight: bold; font-size: 15px; margin-right: 5%">到店自取</text>
					</view>

					<view style="margin-right: 10%">
						<u-icon name="arrow-right" bold size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="content-book">
				<view class="content-book-item" v-for="(book, index) in orderData.bookList" :key="book.id">
					<view class="content-book-photo">
						<image v-if="book.photo != null" style="width: 100%; height: 100%" :src="book.photo"></image>
						<view v-if="book.photo == null"
							style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: lightgrey; font-size: 14px">
							暂无图片
						</view>
					</view>
					<view class="content-book-text">
						<text
							style="font-size: 15px; font-weight: bold; overflow-x: hidden; max-width: 250px">{{ book.name }}</text>
						<text
							style="font-size: 13px; overflow-x: hidden; max-width: 250px; margin-top: 5%">{{ book.author }}</text>
						<text
							style="font-size: 13px; overflow-x: hidden; max-width: 250px; margin-top: 5%">{{ book.press }}</text>
					</view>
				</view>
			</view>
			<view class="footer-button">
				<u-button :loading="isLoading" type="primary" shape="circle" color="#FF463C" text="提交下单"
					@click="handleCreateOrder()"></u-button>
			</view>
		</view>
		<view>
			<u-modal content="暂无地址,是否要去添加地址？" :show="show2" showCancelButton closeOnClickOverlay
				@confirm="confirmAddAddress" @cancel="cancelShow2()" @close="cancelShow2()"></u-modal>
		</view>
	</view>
</template>

<script>
	import {
		createOrder
	} from '@/api/order';
	import {
		listInfo
	} from '@/api/address.js'
	export default {
		data() {
			return {
				isLoading: false,
				show2: false,
				show: false,
				show1: false,
				orderData: {},
				addressList: []
			};
		},
		onLoad(options) {
			console.log('原始参数', options); // 检查参数是否正常接收
			if (options.data) {
				try {
					const data = JSON.parse(decodeURIComponent(options.data));
					this.orderData = data;
					console.log(this.orderData);
				} catch (e) {
					console.error('解析失败', e);
				}
			}
			if (this.orderData.type === '1') {
				this.addressListInfo()
			}
		},
		methods: {
			handleChangePayWay() {
				this.show = true;
			},
			TurnOff() {
				this.show = false;
			},
			confirmPayWay(type) {
				this.show = false;
				this.orderData.type = type;
			},
			async handleCreateOrder() {
				this.isLoading = true
				const res = await createOrder(this.orderData);
				if (res.code === 1000) {
					uni.showToast({
						title: res.msg
					});
				} else if (res.code === 200) {
					uni.showToast({
						title: '下单成功,正在跳转订单页面'
					});
					uni.reLaunch({
						url: '/order/orderList/index'
					});
				}
				this.isLoading = false
			},
			openShow1() {
				this.show1 = true
				this.getAddressList()
			},
			openShow2() {
				this.show2 = true
			},
			cancelShow2() {
				this.show2 = false
			},

			confirmAddAddress() {
				uni.reLaunch({
					url: '/myself/address/index'
				});
			},
			TurnOffShow1() {
				this.show1 = false
				this.addressList = []
			},
			async getAddressList() {
				const res = await listInfo();
				if (res.code == 200) {
					// this.show2 = true
					if (res.rows.length < 1) {
						this.show2 = true
					} else {
						this.addressList = res.rows
						console.log('address', this.addressList)
					}
				}

			},
			async addressListInfo() {
				const res = await listInfo();
				if (res.code == 200) {
					// this.show2 = true
					if (res.rows.length < 1) {
						this.show2 = true
					} else {
						this.orderData.addressInfo = res.rows[0]
					}
				}

			},
			changeAddress(row) {
				console.log('res', row)
				this.show1 = false
				this.orderData.addressInfo = row
			}
		}
	};
</script>

<style lang="scss">
	.container {
		position: relative;
		height: 100vh;
		width: 100%;
		background-color: #f6f6f6;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content {
		width: 93%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content-announcement {
		width: 100%;
		height: 4%;
		background-color: #fff5dc;
		margin-top: 3%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.content-address {
		margin-top: 3%;
		background-color: #ffffff;
		display: flex;
		justify-content: flex-end;
		width: 100%;
		height: 20%;
		border-radius: 15px;
	}

	.content-address-list {
		margin-top: 2%;
		width: 100%;
		height: 10vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.content-address-list-itme {
		width: 90%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.content-address-item {
		width: 80%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.content-address-item-up {
		width: 100%;
		height: 50%;
		display: flex;
	}

	.content-address-item-down {
		width: 100%;
		height: 50%;
	}

	.content-address-icon {
		width: 15%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.content-payWay {
		width: 100%;
		height: 7%;
		background-color: #ffffff;
		margin-top: 3%;
		border-radius: 15px;
		display: flex;
		justify-content: space-between;
	}

	.content-book {
		width: 100%;
		background-color: #ffffff;
		margin-top: 3%;
		border-radius: 15px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.content-book-item {
		width: 90%;
		height: 11.5vh;
		margin-top: 3%;
		margin-bottom: 6%;
		display: flex;
		justify-content: space-between;
	}

	.content-book-photo {
		width: 20%;
		height: 100%;
	}

	.content-book-text {
		width: 70%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.footer-button {
		display: flex;
		// z-index: 999;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		/* 按钮背景色 */
		padding: 10px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	}

	.u-button {
		border: none !important;
	}
</style>